<template>
	<view class="home">
		<view class="card-bottom">
			<!-- 顶部分页栏 -->
			<!-- <view class="top-tab">
				<view :class="['tab-item flex-center', activeTab == index ? 'active' : '']" @tap="handleTab(index)" v-for="(item, index) in tabList" :key="index">{{ item.title }}</view>
			</view> -->
			<y-Refresh ref="mixPulldownRefresh" :top="100" @refresh="onPulldownReresh">
				<view class="scroll-wrapper">
					<!-- 漂流瓶 -->
					<view v-if="activeTab == 0">
						<view class="margin-bottom" v-for="(item, index) in cardList" :key="index">
							<y-DiaryItem :obj="item" />
						</view>
					</view>
					<!-- 聚集岛 -->
					<view v-else>
						<view class="margin-bottom" v-for="(item, index) in rightList" :key="item.id">
							<y-DiaryItem :obj="item" />
						</view>
					</view>
					<y-LoadMore :status="loadMoreStatus" />
				</view>
			</y-Refresh>
			<!-- 右下角按钮 -->
			<y-Fab :bottom="140" :right="40" :btnList="fabList" @click="handleFab" />
		</view>
		<view :class="isIPX?'chatRoom_tab_X':'chatRoom_tab'">
			 	<view class="tableBar" @tap="tab_chat">
			 		<view v-if="unReadSpotNum > 0" :class="'em-unread-spot ' + (unReadSpotNum == '99+'?'em-unread-spot-litleFont':'')">{{ unReadSpotNum }}</view>
			 		<image :class="unReadSpotNum > 0 ? 'haveSpot': ''" src="/static/bottom/xiaoxi.png"></image>
			 		<text style="font-size: 13px;">聊天</text>
			 	</view>
			 
			 	<view class="tableBar" @tap="tab_contact">
			 		<view v-if="unReadTotalNotNum > 0" class="em-unread-spot">{{ unReadTotalNotNum }}</view>
			 		<image :class="unReadTotalNotNum > 0 ? 'haveSpot': ''" src="/static/bottom/tongxunlu.png"></image>
			 		<text style="font-size: 13px;">通讯录</text>
			 	</view>
			 
			 	<view class="tableBar">
			 		<!-- <view v-if="unReadTotalNotNum > 0 || unReadSpotNum == '99+'" class="em-unread-spot"></view> -->
			 		<image :class="unReadTotalNotNum > 0 || unReadSpotNum == '99+'? 'haveSpot': ''" src="/static/bottom/faxianred.png"></image>
			 		<text class="activeText" style="font-size: 13px;">发现</text>
			 	</view>
			 	
			 	<view class="tableBar" @tap="tab_setting">
			 		<image src="/static/bottom/my.png"></image>
			 		<text style="font-size: 13px;">我的</text>
			 	</view>
			 </view>
		</view>
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			yourname: "",
			messageNum: 0,
			unReadSpotNum: 0,
			unReadNoticeNum: 0,
			unReadTotalNotNum: 0,
			isIPX: false,
			userinfo:'',//用户信息
			startNum: 0,
			activeTab: 0,
			// tab的名称
			tabList: [
				{
					title: '漂流瓶'
				},
				{
					title: '聚集岛'
				}
			],
			cardList: [],
			rightList: [],
			loadMoreStatus: 1, //0加载前，1加载中，2没有更多了
			//fab的设置
			fabList: [
				{
					bgColor: '#16C2C2',
					text: '发布',
					fontSize: 28,
					color: '#fff'
				}
			]
		};
	},
	onLoad() {
		that = this;
		that.loadData('add');
		that.rightList = that.$store.state.diary.rightList
	},
	onReachBottom() {
		that.startNum++;
		//上滑加载
		that.loadData('add');
	},
	methods: {
		tab_contact: function () {
		  uni.redirectTo({
		    url: "../main/main?myName=" + uni.getStorageSync("name")
		  });
		},
		tab_chat: function () {
		  uni.redirectTo({
		    url: "../chat/chat"
		  });
		},
		tab_setting: function() {
			uni.redirectTo({
				url: "../setting/setting"
			});
		},
		toDetails(id){
			uni.navigateTo({
				url: '../diary/details/details?id=' + id 
			})
		},
		toOther(id){
			uni.navigateTo({
				url: '../mine/other/other?id=' + id
			})
		},
		loadData(type) {
			if (type === 'add') {
				// 上拉加载
				let list = that.cardList;
				if (list.length == 8) {
					that.loadMoreStatus = 2;
				} else if (list.length > 0) {
					this.token = uni.getStorageSync("token")
					uni.request({
						url: this.G_base + '/api/user/list_fxdt',
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authori-zation': 'Bearer ' + this.token
						},
						success: (res) => {
							console.log(res)
							this.cardList = res.data.data
						},
					});
				} else {
					this.token = uni.getStorageSync("token")
					uni.request({
						url: this.G_base + '/api/user/list_fxdt',
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authori-zation': 'Bearer ' + this.token
						},
						success: (res) => {
							console.log(res)
							this.cardList = res.data.data
						},
					});
				}
			} else {
				//下拉刷新
				that.$refs.mixPulldownRefresh && that.$refs.mixPulldownRefresh.endPulldownRefresh();
			}
		},
		//下拉刷新
		onPulldownReresh() {
			that.loadData('add');
			that.$refs.mixPulldownRefresh && that.$refs.mixPulldownRefresh.endPulldownRefresh();
		},
		handleTab(index) {
			that.activeTab = index;
		},
		//点击右下角tab按钮
		handleFab(e) {
			uni.navigateTo({
				url: '/pages/fabu/fabu'
			});
		}
	}
};
</script>

<style lang="less" scoped>
	// @import '../../colorui/main.css';
	// @import '../../colorui/animation.css';
.home {

	.top-barrage {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
	}

	.card-bottom {
		width: 100%;

		.top-tab {
			display: flex;
			height: 120rpx;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 100;
			background-color: #ffffff;

			.tab-item {
				flex: 1;
				color: #999;
				border-bottom: 4rpx solid #ececec;
			}

			.active {
				color: var(--mainColor); 
				border-bottom: 4rpx solid var(--mainColor);
			}
		}
	}
}
</style>
